<template>
  <div class="mainHome">
    <a-row :gutter="15" class="mb15">
      <a-col class="gutter-row" :span="6">
        <div class="gutter-box gutter-box-color1 clearfix">
          <div class="type-img fl"><i class="iconfont icondianzan"></i></div>
          <div class="type-main fl">
            <h3>好人好事数量</h3>
            <p><span>{{ countModel.goodThingsCount }}</span>件</p>
          </div>
          <i class="iconfont icondianzan type-icon fr"></i>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="6">
        <div class="gutter-box gutter-box-color2 clearfix">
          <div class="type-img fl"><i class="iconfont iconguanzhu1"></i></div>
          <div class="type-main fl">
            <h3>帮扶求助数量</h3>
            <p><span>{{ countModel.minorProtectCount }}</span>件</p>
          </div>
          <i class="iconfont iconguanzhu1 type-icon fr"></i>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="6">
        <div class="gutter-box gutter-box-color3 clearfix">
          <div class="type-img fl"><i class="iconfont icondanwei"></i></div>
          <div class="type-main fl">
            <h3>学校数量</h3>
            <p><span>{{ countModel.schoolCount }}</span>所</p>
          </div>
          <i class="iconfont icondanwei type-icon fr"></i>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="6">
        <div class="gutter-box gutter-box-color4 clearfix">
          <div class="type-img fl"><i class="iconfont iconrenyuan"></i></div>
          <div class="type-main fl">
            <h3>学生数量</h3>
            <p><span>{{ countModel.studentCount }}</span>名</p>
          </div>
          <i class="iconfont iconrenyuan type-icon fr"></i>
        </div>
      </a-col>
    </a-row>
    <a-card class="mainHome-chart mb15">
      <div class="chart-time">时间：
        <a-range-picker
          :getCalendarContainer="node => node.parentNode"
          v-model="queryParam.createTimeRange"
          :disabled-date="disabledDate"
          format="YYYY-MM"
          :placeholder="['开始时间', '结束时间']"
          @change="onDateChange"
        />

      </div>
      <a-tabs default-active-key="1" @change="callback">
        <a-tab-pane key="1" tab="记录好人好事趋势">
          <div id="goodThings" style="width:100%;height:260px"></div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="未成年人帮扶求助趋势">
          <div id="help" style="width:100%;height:260px"></div>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <a-row :gutter="15">
      <a-col class="gutter-row" :span="12">
          <a-card class="schoolHelp" title="未成年人求助类型分析">
            <template v-if="helpAnalysisArr && helpAnalysisArr.length > 0">
              <div id="helpAnalysis" style="width:100%;height: 230px"></div>
            </template>
            <a-empty class="empty-pos" v-else/>
          </a-card>
      </a-col>
      <a-col class="gutter-row" :span="12">
          <a-card class="schoolHelp" title="学校求助总量排名">
            <div class="schoolHelp-list clearfix">
              <a-empty class="empty-pos" v-if="colGraphArr.length <= 0"/>
              <div v-else class="clearfix" v-for="(item, index) in colGraphArr">
                <span class="xh fl">{{ index + 1 }}</span>
                <span class="school-name fl">{{ item.name }}</span>
                <top-chart :x-max="xMax" :minor-data="item.value"></top-chart>
                <span class="schllo-num fr">{{ item.value }}条</span>
              </div>

            </div>
          </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>

import moment from 'moment';
import {getColGraph, getCount, getGoodThingsGraph, getMinorProtectGraph, getPieGraph} from "@api/api";
import TopChart from '@views/dashboard/TopChart'

export default {
  components: {
    TopChart,
  },
  data() {
    return {
      dateFormat: 'YYYY/MM/DD',
      monthFormat: 'YYYY/MM',
      queryParam: {
        createTimeRange: [],
      },
      countModel: {},
      goodThingsX: [],
      goodThingsY: [],
      helpX: [],
      helpY: [],
      helpAnalysisArr: [],
      xMax: '',
      colGraphArr: [],

    };
  },
  methods: {
    moment,
    disabledDate(current) {
      return current && (current < moment().startOf('year')
        || current > moment().endOf('year'));
    },
    onChange(dates, dateStrings) {
      console.log('From: ', dates[0], ', to: ', dates[1]);
      console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
    },
    onDateChange: function (value, dateString) {
      let param;
      param = {
        createTime_begin: dateString[0],
        createTime_end: dateString[1]
      }
      this.getGoodThingsGraph(param);
      this.getMinorProtectGraph(param);

    },
    callback(key) {
      if (key == '1') {
        this.getGoodThingsGraph();
      } else if (key == '2') {
        this.getMinorProtectGraph();
      }
    },
    //记录好人好事趋势
    goodThingsChar(){
      let goodThingsChart = this.$echarts.init(document.getElementById("goodThings"));
      let goodThingsoption = {
        textStyle: {
          color:'#666',
          fontFamily:'Arial',
        },
        grid:{
          left:40,
          right:40,
          bottom:20,
          top:20,
        },
        legend: {
          show:false,
          icon:'roundRect',
          itemWidth:10,
          itemHeight:11,
          borderColor:'#fff',
          itemGap:20,
          data: ['好人好事数量'],
          selectedMode:false,
          textStyle:{
            fontFamily:'Microsoft YaHei'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          data: this.goodThingsX,
          axisLine: {
            lineStyle:{
              color:'#dcdfe6',
              width:1
            },
          },
          axisTick:{
            alignWithLabel:true
          },
        },
        yAxis: {
          type: 'value',
          min:0,
          max: 'dataMax',
          axisLine: {
            show:false,
            splitLine:{
              lineStyle:{
                type:"dashed"
              }
            }
          },
          axisTick:{
            show:false,
          },
          splitLine:{
            lineStyle:{
              show:true,
              color:"#dcdfe6",
              type:"dotted",
            }
          },

        },
        series: [
          {
            name:"好人好事数量",
            data: this.goodThingsY,
            type: 'line',
            symbol:'emptyCircle',
            symbolSize:6,
            smooth:true,
            itemStyle:{
              normal:{
                color:'#1097ff'
              }
            },
            areaStyle:{
              color:'rgba(24,144,255,.3)'
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      goodThingsChart.setOption(goodThingsoption);
    },
    //未成年人帮扶求助趋势
    helpChar(){
      let helpChart = this.$echarts.init(document.getElementById("help"));
      let helpoption = {
        textStyle: {
          color:'#666',
          fontFamily:'Arial',
        },
        grid:{
          left:40,
          right:40,
          bottom:30,
        },
        legend: {
          show:false,
          icon:'roundRect',
          itemWidth:10,
          itemHeight:11,
          borderColor:'#fff',
          itemGap:20,
          data: ['帮扶求助数量'],
          selectedMode:false,
          textStyle:{
            fontFamily:'Microsoft YaHei'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          data: this.helpX,
          axisLine: {
            lineStyle:{
              color:'#dcdfe6',
              width:1
            },
          },
          axisTick:{
            alignWithLabel:true
          },
        },
        yAxis: {
          type: 'value',
          min:0,
          max: 'dataMax',
          axisLine: {
            show:false,
            splitLine:{
              lineStyle:{
                type:"dashed"
              }
            }
          },
          axisTick:{
            show:false,
          },
          splitLine:{
            lineStyle:{
              show:true,
              color:"#dcdfe6",
              type:"dotted",
            }
          },
        },
        series: [
          {
            name:"帮扶救助数量",
            data: this.helpY,
            type: 'line',
            symbol:'emptyCircle',
            symbolSize:6,
            smooth:true,
            itemStyle:{
              normal:{
                color:'#1097ff'
              }
            },
            areaStyle:{
              color:'rgba(24,144,255,.3)'
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      helpChart.setOption(helpoption);
    },
    //未成年人求助类型分析
    helpAnalysisChar(){
      let helpAnalysisChart = this.$echarts.init(document.getElementById("helpAnalysis"));
      let helpAnalysisoption = {
          title: [{
            text: "信息数量",
            left: '23.5%',
            top: '42%',
            textAlign: 'center',
            textBaseline: 'middle',
            textStyle: {
              color: '#666',
              fontWeight: 'normal',
              fontSize: 14
            }
          }, {
            text: this.countModel.minorProtectCount,
            left: '23.5%',
            top: '56%',
            textAlign: 'center',
            textBaseline: 'middle',
            textStyle: {
              color: '#333',
              fontWeight: 'normal',
              fontSize: 18
            }
          }],
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: '50%',
            top:'center',
            itemGap:1,
            itemWidth: 6,
            itemHeight: 6,
            padding:[5,10],
            icon: 'circle',
            align: 'left',
            y: 'center',
            formatter:function(name){
              let data = helpAnalysisoption.series[0].data;
              let total = 0;
              let target;
              for (var i = 0, l = data.length; i < l; i++) {
                total += data[i].value;
                if (data[i].name == name) {
                  target = data[i].value;
                }
              }
              var arr = [
                '{a|'+name+' | '+((target/total)*100).toFixed(2)+'%}{d|'+target+'条}'
              ]
              return arr.join('\n')
            },
            textStyle:{
              rich:{
                a:{
                  color:"#666",
                  fontSize:14,
                  lineHeight:30,
                  width:240,
                },
                d:{
                  color:"#666",
                  fontSize:14,
                  lineHeight:30,
                  textAlign:'right'
                }
              }


            }
          },
          series: [
            {
              name: '信息数量',
              type: 'pie',
              radius: ['65%', '90%'],
              center:['24%','50%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              labelLine: {
                show: false
              },
              itemStyle:{
                normal:{
                  borderColor:'#fff',
                  borderWidth:'2',
                  color:function(params) {
                    //自定义颜色
                    var colorList = [
                      '#3AA1FF','#4ECB73','#FBD437','#F04864','#975FE5'
                    ];
                    return colorList[params.dataIndex]
                  }
                },
              },
              data: this.helpAnalysisArr
            }
          ]
      };
      // 使用刚指定的配置项和数据显示图表。
      helpAnalysisChart.setOption(helpAnalysisoption);
    },

    getCount() {
      getCount().then(res => {
        if (res.success) {
          this.countModel = res.result;
        }
      }).catch((err) => {

      });
    },
    getGoodThingsGraph(param) {
      getGoodThingsGraph(param).then(res => {
        if (res.success) {
            this.goodThingsX = res.result.xAxisList;
            this.goodThingsY = res.result.goodThingsCountList;
            this.goodThingsChar();
        }
      });
    },
    getMinorProtectGraph(param) {
      getMinorProtectGraph(param).then(res => {
        if (res.success) {
          this.helpX = res.result.xAxisList;
          this.helpY = res.result.minorProtectCountList;
          this.helpChar();
        }
      });
    },

    getPieGraph() {
      getPieGraph().then(res => {
        if (res.success) {
          this.helpAnalysisArr = res.result;
        }
      });
    },

    getColData() {
      let that = this;
      getColGraph().then(res => {
        if (res.success) {
          that.xMax = res.result.xMax;
          that.colGraphArr = res.result.minorProtectData;
        }
      });
    },
  },
  updated() {
    this.helpAnalysisChar();
  },
  mounted() {
    this.getCount();
    this.getGoodThingsGraph();
    this.getPieGraph();
    // 挂载时初始化数据
    this.getColData();
  },
};
</script>
